<script setup>
import {computed, ref} from 'vue'
import MenuVue from './menu'
import {getFileList, getFileType, removeFile} from "@/api/company-information";
import DetailVue from "@/views/company-information/com/detail.vue";
import AddVue from "@/views/company-information/com/add-vue.vue";
import {delay, patchZero} from "@/utils";
import {toast} from "@/hook/toast";
import confirm from "@/libs/confirm";
import {FolderAdd} from "@element-plus/icons-vue";

const loading = ref(false)
const pagination = ref({size: 15, page: 1, total: 0})
const tableData = ref([])
const menuList = ref([])

const formData = ref({
  companyliaotype_id: '',
})

async function initMenu() {
  const resp = await getFileType({fid: ''})
  if (!resp.data) resp.data = []
  console.log(resp.data)
  const {data} = resp
  menuList.value = data
  if (!data.length) return -1
  const [first] = data
  formData.value.companyliaotype_id = first.id
  return first.id
}

const activeMenu = computed(() => {
  if (!menuList.value.length) return void 0;
  const target = menuList.value.find(item => item.id === formData.value.companyliaotype_id)
  return target || void 0;
})

function currentChange(ev) {
  pagination.value.page = ev
  addSuccess()
}


init()

async function init() {
  const id = await initMenu()
  if (id === -1) return
  await initData(id)
}

async function initData(companyliaotype_id) {
  loading.value = true
  const {page} = pagination.value
  const resp = await getFileList({
    page,
    companyliaotype_id
  })
  await delay(200)
  const {code, data, msg} = resp
  if (code !== 1) toast({title: msg, type: 'error'})
  if (!data.data) data.data = []
  const {data: list, total} = data
  pagination.value.total = total
  const activeName = activeMenu.value ? activeMenu.value.name : '-'

  function format(timestamp) {
    const date = new Date(timestamp)
    const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
    return `${year}-${patchZero(month)}-${patchZero(day)}`
  }

  tableData.value = list.map(item => {
    item.typeName = activeName
    item.createTime = format(item.createtime * 1000)
    return item
  })

  loading.value = false
}

const detailRef = ref(null)
const addRef = ref(null)

function toDetail(row) {
  detailRef.value?.open(row)
}

function removeHandle(row) {
  confirm({
    message: '你确定删除吗?',
    confirmBtnText: '删除',
    cancelBtnText: '取消'
  }).then(async () => {
    const resp = await removeFile({
      id: row.id
    })
    const {code, msg} = resp
    toast({
      title: msg, type: code === 1 ?
          'success' : 'error'
    })
    if (code !== 1) return
    await initData()
  }).catch(() => {
  })
}

function editHandle(data) {
  addRef.value?.open(data)
}

function handleCheck(data) {
  formData.value.companyliaotype_id = data.id
  pagination.value.page = 1
  pagination.value.total = 0
  initData(data.id)
}

function addSuccess() {
  initData(formData.value.companyliaotype_id)
}

function addFileHandle() {
  addRef.value?.open()
}
</script>

<template>
  <div class="information-container-wrap full box relative"
       v-loading="loading"
  >
    <div class="left-menu-wrap">
      <menu-vue
          :menu="menuList"
          @check="handleCheck"
          :active="formData.companyliaotype_id"
      />
    </div>
    <div class="right-content-wrap">
      <div class="page-header-wrap">
        <div class="current-type">
          <span>{{ activeMenu ? activeMenu.name : '-' }}</span>
        </div>
        <el-button @click="addFileHandle"
                   type="primary"
                   :icon="FolderAdd"
        >添加资料
        </el-button>
      </div>
      <el-table :data="tableData">
        <el-table-column label="附件名" prop="name">
          <template #default="{row}">
            <el-button link type="primary" @click="toDetail(row)">{{ row.name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="类型" prop="typeName"></el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-space>
              <el-button size="small" type="primary" @click="toDetail(row)">详情</el-button>
              <el-button size="small" type="warning" @click="editHandle(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="removeHandle(row)">删除</el-button>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-footer">
        <el-pagination
            @current-change="currentChange"
            :total="pagination.total"
            :page-size="pagination.size"
            layout="prev, pager, next, total"
        />
      </div>
      <detail-vue ref="detailRef"/>
      <add-vue ref="addRef" @success="addSuccess"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.information-container-wrap {
  --menu-width: 200px;
  --content-gap: 24px;

  .page-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;

    .current-type {
      color: #3c4353;
      font-weight: bold;
      font-size: 20px;
    }
  }

  .page-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
  }

  @mixin commonBox {
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 2px 6px rgba(0, 0, 0, .045);
    border-radius: 4px;
    overflow: hidden;
  }

  .left-menu-wrap {
    position: absolute;
    @include commonBox();
    left: 0;
    width: var(--menu-width);
  }

  .right-content-wrap {
    position: absolute;
    @include commonBox();
    right: 0;
    left: calc(var(--menu-width) + var(--content-gap));
  }
}
</style>
